<template>
  <div>
    <h1>Home</h1>
    <button @click="toNews">新闻</button>
    <button @click="toMusic">音乐</button>
    <button @click="toGame">游戏</button>
    <button @click="toNewsReplace">新闻replace</button>
    <button @click="toMusicsReplace">音乐replace</button>
    <button @click="toGameReplace">游戏replace</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
name:"Home",
methods:{
    /* 
    //编程式路由导航中重复导航抛出错误的处理方式
      1. 因为push或者replace方法只书写第一个参数location的时候,则会返回promise实例,我们直接使用catch(()=>{})处理即可
      2. push或者replace可以接受第二个和第三个参数,都是回调函数,用来处理成功和失败
  
  */
  toNews(){
     
      this.$router.push("/home/New");
      

       },
  
  toMusic(){
  
    this.$router.push("/home/Music")
  },
  toGame(){
    this.$router.push({
      name:"Game"
    })
  },
  toNewsReplace(){
    this.$router.replace("/home/New")
  },
  toMusicsReplace(){
    this.$router.replace("/home/Music")
  },
  toGameReplace(){
    this.$router.replace("/home/Game")
  }


}
}
</script>

<style>

</style>